window.onload = async function () {
  const res = await axios({ url: '/dashboard' })
  // console.log(res.data.overview);
  //解构出来year
  console.log(res)
  const { year, salaryData, groupData } = res.data

  //for in遍历对象获取数据
  for (let key in res.data.overview) {
    document.querySelector(`[name="${key}"]`).innerHTML = res.data.overview[key]
  }
  //薪资走势
  renderSunject(year)
  //班级薪资
  renderSalary(salaryData)
  //班级每组薪资
  renderclassSalary(groupData)
  //薪资男女分布
  rendergb(salaryData)
  //籍贯
  renderborn()
}
//薪资走势
function renderSunject(arr) {
  var myChart = echarts.init(document.getElementById('line'))
  var option = {
    title: {
      text: '2021全学科薪资走势',
      top: 10,
      left: 10,
    },
    xAxis: {
      type: 'category',
      data: arr.map((item) => item.month),
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: 'skyblue',
        },
      },
      axisLabel: {
        color: '#000',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'skyblue',
        },
      },
    },
    series: [
      {
        data: arr.map((item) => item.salary), //原本是数组，修改用map遍历返回一个新数组
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 8,
          color: '#5f8eff',
        },
        symbolSize: 10,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#c8e2ff', // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: '#fff', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  }
  //配置项数据项显示图表
  myChart.setOption(option)
}
//班级薪资
function renderSalary(arr) {
  var myChart = echarts.init(document.getElementById('salary'))
  var option = {
    title: {
      text: '班级薪资分布',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      // left: 'center',
      bottom: '5%',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: arr.map((item) => ({
          value: item.g_count + item.b_count,
          name: item.label,
        })),
      },
    ],
    color: ['yellow', 'purple', 'pink'],
  }
  //配置项数据项显示图表
  myChart.setOption(option)
}
//班级小组薪资
function renderclassSalary(arr) {
  var myChart = echarts.init(document.getElementById('lines'))
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        type: 'bar',
      },
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#3ad39c', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#55b1ff', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  }
  //配置项数据项显示图表
  myChart.setOption(option)

  //渲染标题列表
  let str = ''
  for (let key in arr) {
    str += `<button type="button" class="btn btn-xs">${key}</button>`
  }
  document.querySelector('#btns').innerHTML = str
  //排他思想 按钮设置
  const btnList = document.querySelectorAll('#btns button')
  btnList.forEach((btn) => {
    btn.onclick = function () {
      for (let i = 0; i < btnList.length; i++) {
        btnList[i].classList.remove('btn-blue')
      }
      this.classList.add('btn-blue')

      const index = this.innerHTML
      myChart.setOption({
        xAxis: {
          data: arr[index].map((item) => item.name),
        },
        series: [
          {
            type: 'bar',
            data: arr[index].map((item) => item.hope_salary),
          },
          {
            type: 'bar',
            data: arr[index].map((item) => item.salary),
          },
        ],
      })
    }
  })
  btnList[0].click() //模拟点击
}
//薪资男女分布
function rendergb(arr) {
  var myChart = echarts.init(document.getElementById('gender'))
  console.log(arr)
  option = {
    title:[
      {
        text: '男女薪资分布图',
        left: 10,
        top:10
      },
    {
      text:'男生',
      left:'50%',
      top:'40%',
      textAlign:'center'
    },
    {
      text:'女生',
      left:'50%',
      top:'90%',
      textAlign:'center'
    },
    ],
    tooltip: {
      trigger: 'item'
    },
  
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['16%','25%'],
        data: arr.map(item => ({
         value:item.g_count,
         name: item.label
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
         
          
        },
         center:['50%',"20%"],
      },
          {
        name: 'Access From',
        type: 'pie',
        radius: ['16%','25%'],
        data: arr.map(item => ({
          value:item.b_count,
          name: item.label
         })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
         
          
        },
         center:['50%',"70%"],
      },
      
    ]
  };
  

  //配置项数据项显示图表
  myChart.setOption(option)
}
//地图
function renderborn(arr) {
  var myChart = echarts.init(document.getElementById('map'))
  
  let option = {
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: false,
        orient: 'horizontal',
        inRange: {
            color: ['#e0ffff', '#006edd'],
            symbolSize: [30, 100]
        }
    },
    tooltip: {
        padding:8,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
            color: '#fff',
            decoration: 'none',
        }
    },
    series: [{
        name: '接入医院数量',
        type: 'map',
        mapType: 'china',
        itemStyle: {
            normal: {
                label: {
                    show: false
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        label: {
			normal: { //静态的时候展示样式
				show: true, //是否显示地图省份得名称
				textStyle: {
					color: "#fff",
					fontSize: 12
				}
			},
			emphasis: { //动态展示的样式
				color: '#fff',
			},
		},
        data: [{
                name: '北京',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '天津',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '上海',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '重庆',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '河北',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '河南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '云南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '辽宁',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '黑龙江',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '湖南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '安徽',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '山东',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '新疆',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '江苏',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '浙江',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '江西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '湖北',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '广西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '甘肃',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '山西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '内蒙古',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '陕西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '吉林',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '福建',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '贵州',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '广东',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '青海',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '西藏',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '四川',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '宁夏',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '海南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '台湾',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '香港',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '澳门',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
        ]
    }, ]
}
       
    
 
  

  //配置项数据项显示图表
  myChart.setOption(option)
}